<template>
  <demo1>
    <template #footer> 123dsd </template>
  </demo1>
  <div class="about">
    <ul>
      <li
        v-for="(item, i) in menu"
        :key="item.id"
        :ref="
          (el) => {
            if (el) li_ref[i] = el;
          }
        "
      >
        <a-checkbox v-model:checked="item.checked">Checkbox</a-checkbox>
        <p>价格{{ item.price }}</p>
        <p>名字{{ item.name }}</p>
        <p>数量{{ item.number }}</p>
        <button @click="reduce(item.id)">减</button>
        <button @click="add(item.id)">加</button>
      </li>
    </ul>
  </div>
  <div>
    <a-checkbox v-model:checked="check_all">全选</a-checkbox>
  </div>
  <div>{{ toFixed(total, 2) }}</div>
  <div id="modals"></div>
  <teleport to="#modals">
    <div>A</div>
  </teleport>
  <teleport to="#modals">
    <div>B</div>
  </teleport>
  {{ cinput }}
  <cinput v-model="cinput"></cinput>
  <div>
    <model></model>
  </div>
  <p v-pin:top="200">I am pinned onto the page at 200px to the left.</p>
</template>
<script>
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  ref,
  watchEffect,
} from "@vue/runtime-core";
import { menuList, toFixed } from "./menu";
import demo1 from "@/components/demo1.vue";
import model from "@/components/model.vue";
import cinput from "@/components/input.vue";
export default {
  components: {
    demo1,
    model,
    cinput,
  },
  setup() {
    let { menu, setMenu, total, add, reduce, check_all } = menuList();
    const li_ref = ref([]);
    const cinput = ref("");
    const self = getCurrentInstance();
    console.log(self, "self");
    const load = function (val) {
      console.log(val);
    };
    watchEffect(
      () => {
        // 这个副作y与watch用在 DOM 更新之前运行，因此，模板引用还没有持有对元素的引用。
        console.log(li_ref.value, "watchEffect"); // => null
      },
      {
        flush: "post", // 确保模板引用与 DOM 保持同步，并引用正确的元素
      }
    );
    onMounted(() => {
      setTimeout(() => {
        setMenu([
          {
            id: 11,
            name: 211,
            price: 124.12321,
            number: 1,
            checked: true,
          },
          {
            id: 22,
            name: 22,
            price: 124.12321,
            number: 1,
            checked: false,
          },
          {
            id: 33,
            name: 22,
            price: 12.12321,
            number: 1,
            checked: false,
          },
        ]);
        nextTick(() => {
          console.log(
            li_ref.value,
            self.appContext.config.globalProperties.$translate("greetings.hi"),
            "li dom"
          );
        });
      }, 1000);
    });
    return {
      menu,
      total,
      add,
      reduce,
      check_all,
      toFixed,
      load,
      li_ref,
      cinput,
    };
  },
  methods: {
    btn() {
      console.log("as");
    },
  },
};
</script>
<style>
.about {
  display: flex;
  margin: auto;
  width: 600px;
}
.about ul li {
  display: flex;
}
</style>
